<template>
  <div class="admin-layout">
    <!-- 左侧菜单 -->
    <LeftMenu />
    
    <!-- 右侧主要内容区域 -->
    <div class="main-content">
      <!-- 内容区域 - 直接展示子路由内容 -->
      <main class="content-wrapper">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { user } from '@/stores/user.js'
import LeftMenu from '@/components/LeftMenu.vue'

const router = useRouter()
const userStore = user()

// 退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/auth/login')
}

// 组件挂载时检查登录状态
onMounted(() => {
  if (!userStore.isLoggedIn || !userStore.userInfo || userStore.userInfo.roleId !== 2) {
    router.push('/auth/login')
  }
})
</script>

<style lang="scss" scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
}

.main-content {
  width: 85%;
  margin-left: 15%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
  background-color: #f0f2f5;
  padding: 20px;
  box-sizing: border-box;
}

// 页面切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }
  
  .main-content {
    width: 100%;
    margin-left: 0;
    margin-top: 60px; // 为顶部导航留出空间
  }
  
  .content-wrapper {
    padding: 10px;
  }
}

// 小屏幕时调整左侧菜单宽度
@media (max-width: 1200px) {
  .left-menu-container {
    width: 200px;
    min-width: 200px;
  }
  
  .main-content {
    width: calc(100% - 200px);
    margin-left: 200px;
  }
}
</style>